<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue入门 数据 事件 方法</title>
    <script src="./vue.js"></script>
</head>
<body>
     <!--挂载点，模板，实例之间的关系-->
     <!--id= “root”的div为挂载点，挂载点里面的内容叫模板-->
     <!--{{}}语法为插值表达式-->
     <div id = "root">
       <!--<h1> {{number}}</h1>-->

         <!--h1显示的内容就是变量number-->
         <!--<h1 v-text="number"></h1>-->
         <!--使用v-html 会转译之后显示-->
         <!--<div v-html="content"></div>-->
         <!--给div标签绑定click事件,当事件发生时，执行后面的handleClick方法-->
         <!--<div v-on:click="handleClick" >{{content}}</div>-->
         <div @click="handleClick" >{{content}}</div>

     </div>
     <script>
         new Vue({
             //创建vue实例，，让它接管id为root的元素里面的内容，其实实例也就是组件
             el:"#root",
             //挂载点可以写到示例里面
             // template:'<h1>  hello {{msg}}</h1>',
             data:{
                 // msg:" world",
                 // number:123,
                 // content:"<h1>hello</h1>"
                 content:"hello"
             },
             methods:{
                 handleClick: function () {
                     this.content = "world"
                 }
             }
         })
     </script>
</body>
</html>